<template>
  <div>
    <el-card>
      <div class="basicInfo">
        <!-- 设备基本信息 -->
        <el-card class="basicInfo-card-info lg-mb-20" shadow="always">
          <template #header>
            <div class="card-header">
              <span>设备基本信息</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <el-descriptions :column="3" border direction="vertical">
                <el-descriptions-item
                  label="状态"
                  label-align="left"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{
                    baseInfo.state === 0
                      ? "离线"
                      : baseInfo.state === 1
                      ? "在线"
                      : ""
                  }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="设备名称"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.productName }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="设备编号"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.code }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="额定功率"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.power }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="坐标"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.addr }}
                </el-descriptions-item>
                <!-- <el-descriptions-item
                  label="有效期"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.expireTime }}
                </el-descriptions-item> -->
                <el-descriptions-item
                  label="回收日期"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.recoveryDate }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="联系人"
                  label-align="left"
                  align="center"
                >
                  {{ baseInfo.user }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="联系电话"
                  label-align="left"
                  align="center"
                >
                  {{ baseInfo.userPhone }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="所属企业"
                  label-align="left"
                  align="center"
                  >{{ state.cname }}
                </el-descriptions-item>
                <!-- <el-descriptions-item
                  label="最新通讯时间"
                  label-align="left"
                  align="center"
                  >{{ baseInfo.at }}
                </el-descriptions-item> -->
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
        <!-- 设备信息表单 -->
        <el-card
          class="basicInfo-card-form"
          shadow="always"
          header="设备地址展示"
        >
          <el-form
            ref="ruleFormRef"
            :model="baseInfo"
            status-icon
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="地址" prop="addr">
              <el-input v-model="baseInfo.addr" />
              <div class="hidden-xs-only">
                <baidu-map class="map" :center="baseInfo.coordinate" :zoom="15">
                  <bml-marker-clusterer :averageCenter="false">
                    <bm-marker
                      :position="baseInfo.coordinate"
                      :dragging="true"
                      animation="BMAP_ANIMATION_BOUNCE"
                    >
                    </bm-marker>
                  </bml-marker-clusterer>
                </baidu-map>
              </div>
            </el-form-item>
            <el-form-item label="设备型号" prop="model">
              <el-input v-model="baseInfo.model" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="baseInfo.remark" />
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import {
  reactive,
  ref,
  onUnmounted,
  onMounted,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { BaiduMap, BmMarker, BmlMarkerClusterer } from "vue-baidu-map-3x"; //baidu-map组件red
import type { FormInstance } from "element-plus";
import { useBusiness } from "@/store/backend/BusinessM/info";
var timer: NodeJS.Timer;

const ruleFormRef = ref<FormInstance>();
/**
 * 通过坐标获取地址 config和返回值参考百度api
 * @param config {IPointToAddressConfig}  默认值 {extensions_poi 1,output: 'json',coordtype: 'wgs84ll',timeout: 60  }
 * @param aks {String[]} ; ak不传默认使用map ak
 *
 * @return {promise} ;
 */

const state: { cname: string } = reactive({ cname: "" });
const check = (rule: any, value: any, callback: any) => {};
const rules = reactive({
  address: [{ validator: check, trigger: "blur" }],
  model: [{ validator: check, trigger: "blur" }],
});

//设备的基础信息
interface Props {
  baseInfo: any;
}
let data = withDefaults(defineProps<Props>(), {
  baseInfo: () => {
    return {};
  },
});

onMounted(() => {
  //处理设备所属企业
  const business = useBusiness();
  const { companiesMap } = business;
  state.cname = companiesMap.get(Number(data.baseInfo.institution));
});

onBeforeUnmount(() => {
  clearTimeout(timer);
});
</script>
<style lang="scss" scoped>
.basicInfo {
  &-card-form {
    .map {
      left: 0px;
      top: 0px;
      z-index: 9;
      overflow: hidden;
      width: 600px;
      height: calc(100vh - 600px);
    }
  }
}

.lg-mb-20 {
  margin: 20px 0;
}
</style>
